<!doctype html>
<meta charset="utf-8">
<title>人口分析</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/echarts.min.js" charset="utf-8"></script>


<body>
    <div class="bnt">
        <div class="topbnt_left fl">
            <ul>
                <li><a href="#">警情警力</a></li>
                <li class="active"><a href="#">实有人口</a></li>
                <li><a href="#">流动人口</a></li>
                <li><a href="#">实名制</a></li>
            </ul>
        </div>
        <h1 class="tith1 fl">人口分析</h1>
        <div class=" fr topbnt_right">
            <ul>
                <li><a href="#">返回</a></li>
                <li><a href="#">分析报告</a></li>
                <li><a href="#">交通</a></li>
                <li><a href="#">舆情</a></li>
            </ul>
            </ul>
        </div>
    </div>
    <!-- bnt end -->
    <div class="left1 pleft1">
        <div class="lefttime">
            <h2 class="tith2">统计时间</h2>
            <div class="lefttime_text">
                <ul>
                    <li class="bg active">今日</li>
                    <li></li>
                    <li class="bg">本周</li>
                    <li></li>
                    <li class="bg">本月</li>
                    <li></li>
                    <li class="bg">本季</li>
                    <li></li>
                    <li class="bg">本年</li>
                </ul>
            </div>
        </div>
        <div class="plefttoday">
            <h2 class="tith2">今日警情</h2>
            <div class="lefttoday_tit" style=" height:8%">
                <p class="fl">地区：甘孜</p>
            </div>
            <div class="lefttoday_number">
                <div class="widget-inline-box text-center fl">
                    <p>处警数</p>
                    <h3 class="ceeb1fd">54</h3>
                    <h4 class="text-muted">环比<img src="img/iconup.png" height="16" />2%</h4>
                </div>
                <div class="widget-inline-box text-center fl">
                    <p>接警数</p>
                    <h3 class="c24c9ff">54</h3>
                    <h4 class="text-muted">环比<img src="img/icondown.png" height="16" />3%</h4>
                </div>
                <div class="widget-inline-box text-center fl">
                    <p>有效警情</p>
                    <h3 class="cffff00">4</h3>
                    <h4 class="text-muted">环比<img src="img/icondown.png" height="16" />3%</h4>
                </div>
                <div class="widget-inline-box text-center fl">
                    <p>无效警情</p>
                    <h3 class="c11e2dd">4</h3>
                    <h4 class="text-muted">环比<img src="img/icondown.png" height="16" />3%</h4>
                </div>
            </div>
            <!-- lefttoday_number end -->
            <!--  lefttoday_bar end-->
        </div>
        <div class="lpeftmidbot">
            <h2 class="tith2">一标三实统计</h2>
            <div id="lpeftmidbot" class="lpeftmidbotcont"></div>
        </div>
        <div class="lpeftbot">
            <h2 class="tith2">实有人口性别占比</h2>
            <div id="lpeftbot" class="lpeftbotcont"></div>
        </div>
    </div>
    <!--  left1 end -->
    <div class="left2">
        <div class="pleftbox2top">
            <h2 class="tith2">实有人口名族分析</h2>
            <div id="pleftbox2top" class="pleftbox2topcont"></div>
        </div>
        <div class="pleftbox2midd">
            <h2 class="tith2">实有人口年龄结构</h2>
            <div id="pleftbox2midd" class="pleftbox2middcont"></div>
        </div>
        <div class="lpeft2bot">
            <h2 class="tith2">实有人口职业占比TOP5</h2>

            <div class="pvr fl liwp lpeftb2otcont1" style="height:80%;">
                <ul>
                    <li class="hot1">1</li>
                    <li class="hot2">2</li>
                    <li class="hot3">3</li>
                    <li class="hot4">4</li>
                    <li class="hot5">5</li>
                </ul>
                <div id="pleftbox2bott_cont" class="lpeftb2otcont" style="height:100%;"></div>
            </div>


        </div>
    </div>
    </div>
    <div class="mrbox prbox">
        <div class="mrbox_top">
            <div class="mrbox_top_midd">
                <div class="mrboxtm-mbox">
                    <h2 class="tith2 pt1">警情警力地图分析</h2>
                    <div class="mrboxtm-map">
                        <ul>
                            <li class="bluer" style="top:28%;left:12%">15</li>
                            <li class="redr" style="top:31%;left:18%">13</li>
                            <!--  石渠县-->
                            <li class="bluer" style="top:31%;left:33%">15</li>
                            <li class="redr" style="top:34%;left:36%">13</li>
                            <!--  -->
                            <li class="bluer" style="top:12%;left:43%">15</li>
                            <li class="redr" style="top:15%;left:47%">13</li>
                            <!--  -->
                            <li class="bluer" style="top:22%;left:36%">15</li>
                            <li class="redr" style="top:25%;left:41%">13</li>
                            <!--  -->
                            <li class="bluer" style="top:23%;left:57%">15</li>
                            <li class="redr" style="top:16%;left:53%">13</li>
                            <!--  -->
                            <li class="bluer" style="top:26%;left:64%">15</li>
                            <li class="redr" style="top:22%;left:67%">13</li>
                            <!--  -->
                            <li class="bluer" style="top:7%;left:68%">15</li>
                            <li class="redr" style="top:15%;left:69%">13</li>
                            <!--  丹巴-->
                            <li class="bluer" style="top:32%;left:77%">15</li>
                            <li class="redr" style="top:35%;left:80%">13</li>
                            <!--  康定-->
                            <li class="bluer" style="top:28%;left:81%">15</li>
                            <li class="redr" style="top:27%;left:84%">13</li>
                            <!--  泸定-->
                            <li class="bluer" style="top:34%;left:69%">15</li>
                            <li class="redr" style="top:37%;left:73%">13</li>
                            <!--  雅江-->
                            <li class="bluer" style="top:48%;left:87%">15</li>
                            <li class="redr" style="top:47%;left:83%">13</li>
                            <!--  九龙-->
                            <li class="bluer" style="top:48%;left:60%">15</li>
                            <li class="redr" style="top:56%;left:62%">13</li>
                            <!--  理塘-->
                            <li class="bluer" style="top:68%;left:60%">15</li>
                            <li class="redr" style="top:70%;left:63%">13</li>
                            <!--  巴塘-->
                            <li class="bluer" style="top:67%;left:67%">15</li>
                            <li class="redr" style="top:67%;left:71%">13</li>
                            <!--  乡城-->
                            <li class="bluer" style="top:82%;left:70%">15</li>
                            <li class="redr" style="top:84%;left:73%">13</li>
                            <!--  得荣-->
                            <li class="bluer" style="top:68%;left:60%">15</li>
                            <li class="redr" style="top:70%;left:63%">13</li>
                            <!--  巴塘-->
                            <li class="bluer" style="top:71%;left:78%">15</li>
                            <li class="redr" style="top:74%;left:81%">13</li>
                            <!--  稻城-->

                            <li class="bluer" style="top:31%;left:57%">15</li>
                            <li class="redr" style="top:33%;left:53%">13</li>
                            <li class="bluer" style="top:44%;left:47%">15</li>
                            <li class="redr" style="top:48%;left:52%">13</li>
                        </ul>
                    </div>
                </div>
                <!--  map end-->
                <div class="pmrboxbottom">
                    <h2 class="tith2 pt1">涉稳警情</h2>
                    <div id="pmrboxbottom" class="pmrboxbottomcont"></div>
                </div>
            </div>
            <!-- mrbox_top_midd end -->
            <div class="mrbox_top_right">
                <div class="pmrtop1">
                    <h2 class="tith2">实名制人口统计</h2>
                    <div class="pmrtop_cont1">
                        <div class="pmrtop_contheight">
                            <div class="widget-inline-box text-center fl">
                                <p>流动人口</p>
                                <h3 class="pt6 ceeb1fd">8654</h3>
                            </div>
                            <div class="widget-inline-box text-center fl">
                                <p>重点人员</p>
                                <h3 class="pt6 c24c9ff">135622</h3>
                            </div>
                        </div>
                        <div class="lefttoday_bar">
                            <ul>
                                <li class="c1 big1" style="top: 10%;left: 16%;"><span>交通警情6</span></li>
                                <li class="c2 big2" style="top: 35%;left: 65%;"><span>求助1</span></li>
                                <li class="c3 big4" style="top: 25%;left: 35%;"><span>无效报警2</span></li>
                                <li class="c4 big5" style="top: 65%;left: 65%;"><span>投诉2</span></li>
                                <li class="c5 big6" style="top: 65%;left: 25%;"><span>灾害事故1</span></li>
                                <li class="c6 big1" style="top: 45%;left: 15%;"><span>刑事案件1</span></li>
                                <li class="c1 big0" style="top: 35%;left: 75%;"></li>
                                <li class="c2 big0" style="top: 85%;left: 55%;"></li>
                                <li class="c3 big0" style="top: 85%;left: 15%;"></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- pmrtop  -->

                <div class="pmrtop" style=" margin-top: 3.3%">
                    <h2 class="tith2">实名制人口统计</h2>
                    <div class="pmrtop_cont pmrtop_wid">
                        <div class="pmrtop_contheight">
                            <div class="widget-inline-box text-center fl">
                                <p>流动人口</p>
                                <h3 class="pt6 ceeb1fd">8654</h3>
                            </div>
                            <div class="widget-inline-box text-center fl">
                                <p>重点人员</p>
                                <h3 class="pt6 c24c9ff">135622</h3>
                            </div>
                            <div class="widget-inline-box text-center fl">
                                <p>重点人员</p>
                                <h3 class="pt6 cffff00">135622</h3>
                            </div>
                        </div>
                        <div id="pmrmidd" class="pmrmiddcont"></div>
                    </div>
                </div>
                <!-- pmrtop  -->

            </div>
        </div>


        <div class="mrbox_bottom">
            <div class="rbottom_box1">
                <h2 class="tith2">高危人员年龄分析</h2>
                <div id="prbottom_box1" class="prbottom_box1cont"></div>
            </div>
            <div class="rbottom_box2">
                <h2 class="tith2">高危人员分类统计</h2>
                <div id="prbottom_box2" class="prbottom_box1cont"></div>
            </div>
            <div class="rbottom_box3">
                <h2 class="tith2 pt2">流动人口年龄分析</h2>
                <div id="prbottom_box3" class="prbottom_box1cont"></div>
            </div>

        </div>
    </div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('lpeftmidbot'));
        option = {
            backgroundColor: 'rgba(1,202,217,.2)',
            grid: {
                left: 60,
                right: 20,
                top: 45,
                bottom: 40
            },

            toolbox: {
                feature: {
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['line', 'bar']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            legend: {
                top: 10,
                textStyle: {
                    fontSize: 10,
                    color: 'rgba(255,255,255,.7)'
                },
                data: ['实有人口', '实有房屋', '实有单位']
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },

                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                axisPointer: {
                    type: 'shadow'
                }
            }],
            yAxis: [{
                type: 'value',
                name: '',
                min: 0,
                max: 250,
                interval: 50,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.3)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.01)'
                    }
                },

                axisLabel: {
                    formatter: '{value} ml'
                }
            }, {
                type: 'value',
                name: '',
                max: 25,
                interval: 5,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0)'
                    }
                },
                axisLabel: {
                    formatter: '{value} °C'
                }
            }],
            series: [

                {
                    name: '实有人口',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#b266ff'
                                }, {
                                    offset: 1,
                                    color: '#121b87'
                                }]
                            )
                        }
                    },
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                }, {
                    name: '实有房屋',
                    type: 'bar',

                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00f0ff'
                                }, {
                                    offset: 1,
                                    color: '#032a72'
                                }]
                            )
                        }
                    },
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                }, {
                    name: '实有单位',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#fffb34'
                                }, {
                                    offset: 1,
                                    color: '#032a72'
                                }]
                            )
                        }
                    },
                    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
            ]
        };
        myChart.setOption(option);
    </script>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('lpeftbot'));
        option = {
            color: ['#d2d17c', '#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
            backgroundColor: 'rgba(1,202,217,.2)',
            grid: {
                left: 20,
                right: 20,
                top: 0,
                bottom: 20
            },
            legend: {
                top: 10,
                textStyle: {
                    fontSize: 10,
                    color: 'rgba(255,255,255,.7)'
                },
                data: ['男', '女']
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '55%'],
                data: [{
                        value: 335,
                        name: '男'
                    }, {
                        value: 310,
                        name: '女'
                    }

                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('pleftbox2top'));
        option = {
            color: ['#d2d17c', '#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
            backgroundColor: 'rgba(1,202,217,.2)',
            grid: {
                left: 20,
                right: 20,
                top: 0,
                bottom: 20
            },
            legend: {
                top: 10,
                textStyle: {
                    fontSize: 10,
                    color: 'rgba(255,255,255,.7)'
                },
                data: ['藏族', '回族', '彝族', '汉族', '土家族']
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '55%'],
                data: [{
                        value: 335,
                        name: '藏族'
                    }, {
                        value: 310,
                        name: '回族'
                    }, {
                        value: 234,
                        name: '彝族'
                    }, {
                        value: 135,
                        name: '汉族'
                    }, {
                        value: 158,
                        name: '土家族'
                    }

                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('pleftbox2midd'));
        option = {
            color: ['#d2d17c', '#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
            backgroundColor: 'rgba(1,202,217,.2)',
            grid: {
                left: 20,
                right: 20,
                top: 0,
                bottom: 20
            },
            legend: {
                top: 10,
                textStyle: {
                    fontSize: 10,
                    color: 'rgba(255,255,255,.7)'
                },
                data: ['0-6', '6-18', '18-28', '28-55', '55以上']
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '65%'],
                data: [{
                        value: 335,
                        name: '0-6'
                    }, {
                        value: 310,
                        name: '6-18'
                    }, {
                        value: 234,
                        name: '18-28'
                    }, {
                        value: 135,
                        name: '28-55'
                    }, {
                        value: 158,
                        name: '55以上'
                    }

                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('pmrboxbottom'));
        option = {
            color: ['#d2d17c', '#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
            backgroundColor: 'rgba(1,202,217,.2)',
            legend: {
                top: 10,
                textStyle: {
                    fontSize: 10,
                    color: 'rgba(255,255,255,.7)'
                },
                data: ['涉恐人员', '涉稳人员', '涉毒人员', '在逃人员', '重点上访人员', '肇事肇祸精神病人', '刑事犯罪前科人员']
            },
            grid: {
                left: 10,
                right: 10,
                top: 40,
                bottom: 10,
                containLabel: true
            },

            xAxis: [{
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.3)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.01)'
                    }
                },
                data: ['康定市', '泸定县', '丹巴县', '九龙县', '新龙县', '巴塘县', '得荣县', '理塘县', '甘孜县', '道孚县', '德格县', '色达县']
            }],
            yAxis: [{
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.3)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.01)'
                        }
                    },

                    axisLabel: {
                        formatter: '{value} ml'
                    },
                    type: 'value'
                }

            ],
            series: [

                {
                    name: '涉恐人员',
                    type: 'bar',
                    barWidth: 30,
                    stack: '搜索引擎',
                    data: [620, 732, 701, 734, 1090, 1130, 1120, 620, 732, 701, 734, 1090, ]
                }, {
                    name: '涉稳人员',
                    type: 'bar',
                    stack: '搜索引擎',
                    data: [120, 132, 101, 134, 290, 230, 220, 101, 134, 290, 230, 220]
                }, {
                    name: '涉毒人员',
                    type: 'bar',
                    stack: '搜索引擎',
                    data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
                }, , {
                    name: '在逃人员',
                    type: 'bar',
                    stack: '搜索引擎',
                    data: [120, 132, 101, 134, 290, 230, 220, 101, 134, 290, 230, 220]
                }, {
                    name: '重点上访人员',
                    type: 'bar',
                    stack: '搜索引擎',
                    data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
                }, {
                    name: '肇事肇祸精神病人',
                    type: 'bar',
                    stack: '搜索引擎',
                    data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
                }, {
                    name: '重大刑事犯罪前科人员',
                    type: 'bar',
                    stack: '搜索引擎',
                    data: [62, 82, 91, 84, 109, 110, 120, 91, 84, 109, 110, 120]
                }
            ]
        };
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('pleftbox2bott_cont'));
        option = {
            color: ['#7ecef4'],
            backgroundColor: 'rgba(1,202,217,.2)',
            grid: {
                left: 40,
                right: 20,
                top: 30,
                bottom: 0,
                containLabel: true
            },

            xAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0)'
                    }
                },
                axisLabel: {
                    color: "rgba(255,255,255,0)"
                },
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.5)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    color: "rgba(255,255,255,.5)"
                },
                data: ['务农', '建筑工', '技工', '销售', '职工']
            },
            series: [{
                name: '2011年',
                type: 'bar',
                barWidth: 20,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            1, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(230,253,139,.7)'
                            }, {
                                offset: 1,
                                color: 'rgba(41,220,205,.7)'
                            }]
                        )
                    }
                },
                data: [18203, 23489, 29034, 104970, 131744]
            }]
        };
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('prbottom_box1'));
        option = {
            color: ['#d2d17c', '#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
            backgroundColor: 'rgba(1,202,217,.2)',
            grid: {
                left: 20,
                right: 30,
                top: 0,
                bottom: 20
            },
            legend: {
                top: 5,

                textStyle: {
                    fontSize: 10,
                    color: 'rgba(255,255,255,.6)'
                },
                data: ['男', '女', '总数']
            },
            grid: {
                left: 20,
                right: 30,
                top: 40,
                bottom: 10,
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },
                data: ['0-6', '6-18', '18-28', '28-55', '55以上']
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },
            },
            series: [{
                name: '男',
                type: 'line',
                stack: '总量',
                areaStyle: {
                    normal: {}
                },
                data: [120, 132, 101, 134, 90]
            }, {
                name: '女',
                type: 'line',
                stack: '总量',
                data: [220, 182, 191, 234, 290]
            }, {
                name: '总数',
                type: 'line',
                stack: '总量',
                data: [150, 232, 201, 154, 190]
            }]
        };
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('prbottom_box2'));
        option = {
            backgroundColor: 'rgba(1,202,217,.2)',
            color: ['#7ecef4', '#7fd7b1'],
            grid: {
                left: 30,
                right: 20,
                top: 20,
                bottom: 40
            },
            xAxis: {
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.7)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                data: ['涉恐', '涉稳', '涉毒', '重点', '肇事', '重大']
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                }
            },
            series: [{
                symbolSize: 20,
                data: [
                    [0.0, 8.04],
                    [2.0, 6.95],
                    [3.0, 7.58],
                    [5.0, 8.81],
                    [0.4, 8.33],
                    [4.0, 1.96],
                    [0.3, 7.24],
                    [4.6, 4.26],
                    [2.0, 4.84],
                    [2.0, 4.82],
                    [5.0, 5.68]
                ],
                type: 'scatter'
            }]
        };
        myChart.setOption(option);
    </script>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('prbottom_box3'));
        option = {
            backgroundColor: 'rgba(1,202,217,.2)',
            grid: {
                left: 60,
                right: 20,
                top: 40,
                bottom: 40
            },

            toolbox: {
                feature: {
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['line', 'bar']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            legend: {
                top: 10,
                textStyle: {
                    fontSize: 10,
                    color: 'rgba(255,255,255,.7)'
                },
                data: ['男', '女', '总数']
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },

                data: ['0-6', '6-18', '18-28', '28-55', '55以上'],
                axisPointer: {
                    type: 'shadow'
                }
            }],
            yAxis: [{
                type: 'value',
                name: '',
                min: 0,
                max: 250,
                interval: 50,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.3)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.01)'
                    }
                },

                axisLabel: {
                    formatter: '{value} ml'
                }
            }, {
                type: 'value',
                name: '',
                max: 25,
                interval: 5,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0)'
                    }
                }
            }],
            series: [

                {
                    name: '男',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#b266ff'
                                }, {
                                    offset: 1,
                                    color: '#121b87'
                                }]
                            )
                        }
                    },
                    data: [2.0, 4.9, 7.0, 23.2, 25.6]
                }, {
                    name: '女',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00f0ff'
                                }, {
                                    offset: 1,
                                    color: '#032a72'
                                }]
                            )
                        }
                    },
                    data: [8.6, 5.9, 9.0, 26.4, 28.7]
                }, {
                    name: '总数',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#fffb34'
                                }, {
                                    offset: 1,
                                    color: '#032a72'
                                }]
                            )
                        }
                    },
                    yAxisIndex: 1,
                    data: [6.0, 5.2, 3.3, 4.5, 6.3]
                }
            ]
        };
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('pmrmidd'));
        option = {
            color: ['#f1ff00', '#00c1ff', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
            // backgroundColor: 'rgba(1,202,217,.2)',
            grid: {
                left: 20,
                right: 20,
                top: 30,
                bottom: 30
            },
            radar: {
                name: {
                    textStyle: {
                        fontSize: 10,
                        color: 'rgba(255,255,255,.8)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: [
                            'rgba(1,202,217,.01)', 'rgba(1,202,217,.01)'
                        ].reverse()
                    }
                },
                splitArea: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(1,202,217,.7)'
                    }
                },
                indicator: [{
                    name: '红色警情',
                    max: 6500
                }, {
                    name: '橙色警情',
                    max: 16000
                }, {
                    name: '黄色警情',
                    max: 30000
                }, {
                    name: '绿色警情',
                    max: 44000
                }]
            },
            series: [{
                name: '',
                type: 'radar',
                radius: [5, 100],
                center: ['50%', '50%'],
                data: [{
                    value: [4300, 10000, 28000, 19000],
                    name: ''
                }, {
                    value: [5000, 14000, 22000, 41000],
                    name: ''
                }]
            }]
        };
        myChart.setOption(option);
    </script>


</body>

</html>